<template>
   <div class="tag-select">
     <template v-for="item in tagColors">
       <a-tooltip :title="item.value">
        <a-tag :color="item.value" @click="handleClick(item.value)">
          <check-outlined class="tag-check" v-if="item.value === color"/>
        </a-tag>
       </a-tooltip>
     </template>
   </div>
</template>

<script setup lang="ts">
import {CheckOutlined} from "@ant-design/icons-vue";
import {onMounted} from "vue";
defineProps({class:String})
const tagColors:{value:string, hex: string}[] = [
  {value: "", hex: ''},
  {value: "default", hex: '#fafafa'},
  {value: "processing", hex: '#e6f4ff'},
  {value: "success", hex: '#f6ffed'},
  {value: "error", hex: '#fff2f0'},
  {value: "warning", hex: '#fffbe6'},
  {value: "magenta", hex: '#fff0f6'},
  {value: "red", hex: '#fff1f0'},
  {value: "volcano", hex: '#fff2e8'},
  {value: "orange", hex: '#fff7e6'},
  {value: "gold", hex: '#fffbe6'},
  {value: "lime", hex: '#fcffe6'},
  {value: "cyan", hex: '#e6fffb'},
  {value: "blue", hex: '#e6f4ff'},
  {value: "geekblue", hex: '#f0f5ff'},
  {value: "purple", hex: '#f9f0ff'}
];
const color = defineModel('value',{default:''})
const handleClick = (value:string) => {
  color.value = value
}
onMounted(()=>{
  color.value = color.value || tagColors[0]?.value as string
})
</script>

<style scoped>
.tag-select {
   display: flex;
   flex-wrap: wrap;
   gap:4px;
 }
.tag-select>span {
    margin: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
 }
.tag-select span:hover{
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  transition: all .3s;
}
.tag-select .tag-check {
  font-size: 10px;
}
</style>